
<!DOCTYPE html>
<!--[if IE 8]> 				 <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>Foundation 4</title>

        <link rel="stylesheet" href="stylesheets/normalize.css" />

        <link rel="stylesheet" href="stylesheets/app.css" />
        <link href='http://fonts.googleapis.com/css?family=Electrolize' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>


        <script src="javascripts/vendor/custom.modernizr.js"></script>

    </head>
    <body>
        <header>
            <div class="row" id="header">
                <!--LOGO, NAV, BOTONES-->
                <div class="large-3 columns">
                    <a href="#"><img src="images/logo-ppt.jpg" alt="" /></a>
                </div>
                <div class="large-7 large-offset-2 columns">
                    <form action="" id="login">
                        <div class="row">
                            <div class="large-4 columns"><input type="text" placeholder="Usuario" /></div>
                            <div class="large-4 columns"><input type="text" placeholder="Contrase&ntilde;a"/></div>
                            <div class="large-2 columns"><a href="#" class="button radius">Ingresar</a></div>
                            <div class="large-2 columns" id="registrate"><a href="#">Registrate</a></div>
                        </div>
                    </form>
                </div>
            </div>            
            <div class="row" >    
                <div class="small-10 hide-for-small large-12 columns">
                    <div class="button-ctrl">
                        <div class="large-3 columns">
                            <a href="#" class="button radius">Servicio al cliente</a>
                        </div>
                        <div class="large-3 columns">
                            <a href="#" class="button radius">La Empresa</a>
                        </div>
                        <div class="large-3 columns">
                            <a href="#" class="button radius">Comunidad</a>
                        </div>
                        <div class="large-3 columns">
                            <a href="#" class="button radius">Contacto</a>
                        </div>
                    </div>
                </div>
            </div>

            <!--NAV FOR MOBILE-->

            <nav class="top-bar hide-for-medium-up">
                <ul class="title-area">
                    <!-- Title Area -->
                    <li class="name"></li>
                    <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
                    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
                </ul>
                <section class="top-bar-section">
                    <!-- Left Nav Section -->
                    <ul class="left">
                        <li class="divider"></li>
                        <li class="active"><a href="#">Servicio al cliente</a></li>
                        <li class="divider"></li>
                        <li><a href="#">La Empresa</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Comunidad</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Contacto</a></li>
                    </ul>
                </section>
            </nav>
            <!--FIN NAC FOR MOVILE-->
            <!--FIN LOGO, NAV, BOTONES-->    

        </header>      

        <!--CONTENIDO, PANELES, SIDE NAV-->
        <section>
            <div class="row">
                <div class=" small-12 large-9 columns">
                    <img src="images/retoque.jpg" alt="Conectando Salta" />
                </div>
                <div class="large-3 columns">
                    <form action="">
                        <input class="hide-for-medium-down" type="text" placeholder="Search">
                        <ul class="no-bullet" id="links">
                            <li><img src="images/EDESA1.jpg" alt="" /><a href="#">Links &uacute;tiles</a><hr /></li>
                            <li><img src="images/globo.jpg" alt="" /><a href="#">Atenci&oacute;n telef&oacute;nica</a><hr /></li>
                            <li><img src="images/impresora.jpg" alt="" /><a href="#">Impresi&oacute;n de facturas</a><hr /></li>
                            <li><img src="images/signo_peso.jpg" alt="" /><a href="#">Opciones de pago</a><hr /></li>
                            <li><img src="images/persona.jpg" alt="" /><a href="#">Consejos &uacute;tiles</a><hr /></li>
                            <li><img src="images/calendario.jpg" alt="" /><a href="#">Cortes programados</a><hr /></li>
                        </ul> 
                    </form>
                </div>
            </div>   
            <div class="row">
                <div class="large-6 columns">
                    <div class="pnl_ctrl">
                        <div class="row">                        
                            <div class="small-4 large-4 columns">
                                <img src="images/community.jpeg" alt=""/>
                            </div>
                            <div class="small-8 large-8 columns">
                                <h5>Compromiso con la comunidad</h5>
                                <p>EDESA busca estar conectada con la gente, insertarse en los problemas de la comunidad y trabajar como un eslab&oacute;n m&aacute;s de la sociedad a la que pertenece.</p>
                                <a href="#">Ver mas</a>
                            </div>                             
                        </div>
                    </div>
                </div>
                <div class="large-6 columns">
                    <div class="pnl_ctrl">
                        <div class="row">                        
                            <div class="small-4 large-4 columns">
                                <div class="clientes">
                                    <img  src="images/clientes.jpeg" alt="Clientes" />
                                </div>
                            </div>
                            <div class="small-8 large-8 columns">
                                <h5>Grandes clientes</h5>
                                <p>Para hacer m&aacute;s eficiente la contrataci&oacute;n y uso del servicio de energ&iacute;a el&eacute;ctrica,EDESA le ofrece informaci&oacute;n &uacute;til sobre algunos aspectos a tener en cuenta .</p>                                 
                                <a href="#">Ver mas</a>
                            </div>                             
                        </div>
                    </div>
                </div>  
            </div>
            <!--FIN CONTENIDO, PANELES, SIDE NAV-->

            <!--CONTACTO, FACE, TWIT-->         
            <<div class="row">
                <div class="large-12 columns">
                    <div class="contacto_ctrl">
                        <div class="row">
                            <div class="small-2 large-1 columns">
                                <img id="telefono" src="images/telefono.jpg" alt="" />
                            </div>
                            <div class="small-8 large-9 columns">
                                <p id="ponete">Ponete en contacto:</p>                           
                                <p id="tel">0800-777-EDESA <span>(3372)</span></p>
                                <p id="seguinos">Seguinos en:</p>
                            </div>
                            <div class="small-2 large-2 columns">
                                <img src="images/face.jpg" alt="" />                         
                                <img src="images/twit.jpg" alt="" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--FIN CONTACTO, FACE, TWIT-->

        <!--PIE DE PAGINA, CONTANCTO, FORMULARIO-->
        <footer>
            <div class="row">
                <div class="large-12 columns">
                    <div class="footer_ctrl">
                        <div class="row">
                            <div class="small-6 large-3 columns">
                                <img src="images/logo_footer.jpg" alt="" />
                                <p id="info">EDESA S.A.
                                    Pasaje Zorrilla 29, Salta
                                    (A 4400 AVA)Argentina
                                    Tel:(0387) 431-0822
                                    <a href="#">clientes.edesa@emdersa.com.ar</a> 
                                </p>
                                <p class="seguinos-footer hide-for-small">Seguinos en</p>
                                <img class="hide-for-small" src="images/face_footer.jpg" alt="" />
                                <img class="hide-for-small" src="images/twit_footer.jpg" alt="" />
                            </div>
                            <div class="large-6 columns hide-for-small">                                
                                <div class="large-3 columns">                                   
                                    <ul class="no-bullet">                                        
                                        <li><p>Servicios:</p></li>
                                        <li><a href="#">Link ejemplo</a></li>
                                        <li><a href="#">Link ejemplo</a></li>
                                        <li><a href="#">Link ejemplo</a></li>
                                        <li><a href="#">Link ejemplo</a></li>                                                                               
                                    </ul>                                   
                                </div>
                                <div class="large-3 columns">
                                    <ul class="no-bullet">
                                        <li><p>La Empresa:</p></li>
                                        <li><a href="#">Link ejemplo</a></li>
                                        <li><a href="#">Link ejemplo</a></li>
                                        <li><a href="#">Link ejemplo</a></li>
                                        <li><a href="#">Link ejemplo</a></li>                                        
                                    </ul>
                                </div>
                                <div class="large-3 columns">
                                    <ul class="no-bullet">
                                        <li><p>Comunidad:</p></li>
                                        <li><a href="#">Link ejemplo</a></li>
                                        <li><a href="#">Link ejemplo</a></li>
                                        <li><a href="#">Link ejemplo</a></li>                                        
                                    </ul>
                                </div>
                                <div class="large-3 columns">
                                    <ul class="no-bullet">
                                        <li><p>Navegaci&oacute;n:</p></li>
                                        <li><a href="#">Link ejemplo</a></li>
                                        <li><a href="#">Link ejemplo</a></li>
                                        <li><a href="#">Link ejemplo</a></li>                                                                           
                                    </ul>
                                </div>
                            </div>
                            <div class="large-3 columns">
                                <form action="">
                                    <div class="row">
                                        <div class="large-12 columns">                                              
                                            <p id="data-user">Contacto:</p>
                                            <input type="text" placeholder="Nombre">
                                            <input type="text" placeholder="Apellido">
                                            <input type="text" placeholder="Email">
                                            <textarea placeholder="Mensaje"></textarea>                                                                                                                              
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>        
        </footer>
        <!-- FIN PIE DE PAGINA, CONTANCTO, FORMULARIO-->
        <script>
            document.write('<script src=' +
                    ('__proto__' in {} ? 'javascripts/vendor/zepto' : 'javascripts/vendor/jquery') +
                    '.js><\/script>');
        </script>

        <script src="javascripts/foundation/foundation.js"></script>

        <script src="javascripts/foundation/foundation.alerts.js"></script>

        <script src="javascripts/foundation/foundation.clearing.js"></script>

        <script src="javascripts/foundation/foundation.cookie.js"></script>

        <script src="javascripts/foundation/foundation.dropdown.js"></script>

        <script src="javascripts/foundation/foundation.forms.js"></script>

        <script src="javascripts/foundation/foundation.joyride.js"></script>

        <script src="javascripts/foundation/foundation.magellan.js"></script>

        <script src="javascripts/foundation/foundation.orbit.js"></script>

        <script src="javascripts/foundation/foundation.placeholder.js"></script>

        <script src="javascripts/foundation/foundation.reveal.js"></script>

        <script src="javascripts/foundation/foundation.section.js"></script>

        <script src="javascripts/foundation/foundation.tooltips.js"></script>

        <script src="javascripts/foundation/foundation.topbar.js"></script>


        <script>
            $(document).foundation();
        </script>
    </body>
</html>
